<template>
	<div class="toolbar">
		<el-scrollbar class="toolbar-container" v-if="activeComponent && activeComponent.type">
			<div class="toolbar-box">
				<component :is="`${activeComponent.type}Tool`"></component>
			</div>
		</el-scrollbar>
		<el-empty v-else description="请从中间画布选中一个组件"/>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';
	
	//组件
	import CustomTool from '/@/views/decorator/components/toolBar/basics/custom.vue';
	import BannerTool from '/@/views/decorator/components/toolBar/basics/banner.vue';
	import TextTool from '/@/views/decorator/components/toolBar/basics/text.vue';
	import ImageTool from '/@/views/decorator/components/toolBar/basics/image.vue';
	import ImageTextTool from '/@/views/decorator/components/toolBar/basics/imageText.vue';
	import ImageTextListTool from '/@/views/decorator/components/toolBar/basics/imageTextList.vue';
	import DivisionTool from '/@/views/decorator/components/toolBar/basics/division.vue';
	import VideoTool from '/@/views/decorator/components/toolBar/basics/video.vue';
	import PencilTool from '/@/views/decorator/components/toolBar/basics/pencil.vue';
	import CounterTool from '/@/views/decorator/components/toolBar/basics/counter.vue';
	import CheckboxTool from '/@/views/decorator/components/toolBar/basics/checkbox.vue';
	import RadioboxTool from '/@/views/decorator/components/toolBar/basics/radiobox.vue';
	import SelectboxTool from '/@/views/decorator/components/toolBar/basics/selectbox.vue';
	import ButtonTool from '/@/views/decorator/components/toolBar/basics/button.vue';
	
	export default {
		name: 'decorator/toolbar/index',
		components: {
			CustomTool,
			BannerTool,
			TextTool,
			ImageTool,
			ImageTextTool,
			ImageTextListTool,
			DivisionTool,
			VideoTool,
			PencilTool,
			CounterTool,
			CheckboxTool,
			RadioboxTool,
			SelectboxTool,
			ButtonTool,
		},
		setup() {
			const store = useStore();
			const state = reactive({
				
			});
			
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			return {
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.toolbar-container{
		margin: 0;
		padding: 0 5px;
		width: 100%;
		height: calc(100vh - 320px);
		.toolbar-box{
			width: 100%;
		}
	}
</style>
